<template>
	<view>
		<view class=''>
			<u-search 
				placeholder="搜索车,内容等等" 
				v-model="keyword" 
				:showAction='false'
				@focus='focus'
				@blur='blur'
				@change='$u.debounce(change,500)'
			></u-search>
		</view>
		<view v-show='isFatr'>
			<!-- icon -->
			<view class="icon">
				<view>
					<u-image width="104rpx" height="104rpx" src="/static/used1.png">
					</u-image>
					<text class="fontWe text36 mt16">合作加盟</text>
				</view>
				<view>
					<u-image width="104rpx" height="104rpx" src="/static/used2.png">
					</u-image>
					<text class="fontWe text36 mt16">免费评估</text>
				</view>
				<view>
					<u-image width="104rpx" height="104rpx" src="/static/used3.png">
					</u-image>
					<text class="fontWe text36 mt16">高价卖车</text>
				</view>
			</view>
			<!-- 图片 banner-->
			<view class="mt30">
				<u--image width="100%" height="232rpx" src="/static/used3.png"></u--image>
			</view>
			<!--条件筛选-->
			<view class='filter'>
				<sxs-dropdown :menuList='menuList' :style='styleList'>
					<sxs-dropdown-item
						dropdownKey='region' 
						:options='options1' 
						type='custom'
						@change='hanlderClick'
					></sxs-dropdown-item>
					<sxs-dropdown-item dropdownKey='default' @change='hanlderClick' :options='options2' :forward='true'></sxs-dropdown-item>
					<sxs-dropdown-item dropdownKey='brand' @change='hanlderClick' :options='options3' :forward='true'></sxs-dropdown-item>
				</sxs-dropdown>
			</view>
		</view>
		<view>
			<view v-for='item in list' :key='item.id' @click='goDetails(item.id)'>
				<u--image :src='item.img'></u--image>
				<text>名称：{{ item.name }}</text>
				<text>价格：{{ item.price }}</text>
				<text>城市：{{ item.city }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { carList , getBrand } from '@/api/car.js'
export default{
	data () {
		return {
			list:[],
			carObj:{
				page:1,
				city:'',
				brand_id:'',
				price:'',
				search:''
			},
			keyword:'',
			isFatr:true,
			//下拉菜单
			menuList:[
				{title:'区域',dropdownKey:'region'},
				{title:'默认排序',dropdownKey:'default'},
				{title:'品牌',dropdownKey:'brand'}
			],
			styleList:{
				height:'100rpx'
			},
			//下拉菜单子集
			options1:[
				{value:1,label:'区域1'},
				{value:2,label:'区域2'},
				{value:3,label:'区域3'}
			],
			options2:[
				{value:1,label:'默认排序'},
				{value:2,label:'价格升序'},
				{value:3,label:'价格降序'}
			],
			options3:[
				// {value:1,label:'品牌1'},
				// {value:2,label:'品牌2'},
				// {value:3,label:'品牌3'}
			]
		}
	},
	// 下拉操作的生命周期
	onPullDownRefresh(){
		this.list = [];
		this.getData();
		setTimeout(()=>{
			uni.stopPullDownRefresh();
		},1000)
	},
	//触底
	onReachBottom(){
		console.log('触底')
	},
	onLoad(){
		this.getData();
		this.getBrands();
	},
	methods:{
		getData(){
			carList(this.carObj).then(res=>{
				this.list = res.data.list;
			})
		},
		//获取品牌列表
		async getBrands(){
			let res = await getBrand();
			res.data.list.forEach(v=>{
				this.options3.push({
					value:v.id,
					label:v.name
				})
			})
		},
		//搜索获得焦点
		focus(){
			this.isFatr = false;
		},
		//搜索失去焦点
		blur(){
			this.isFatr = true;
			this.carObj.search = '';
			this.getData();
		},
		//搜索框内容改变
		change(){
			if( !this.keyword ){
				return false;
			}
			this.carObj.price = 0;
			this.carObj.search = this.keyword;
			this.getData();
		},
		//下拉菜单
		hanlderClick( e ){
			//数据初始化
			this.carObj = {
				page:1,
				city:'',
				brand_id:'',
				price:'',
				search:''
			};
			//点击价格
			if( e.key =='default' ){
				this.carObj.price = e.value-1;
			}
			//点击品牌
			if( e.key =='brand'){
				this.carObj.brand_id = e.value;
			}
			//点击区域
			if( e.item ){
				this.carObj.city = 	e.item.name;
			}
			//请求数据
			this.getData();
		},
		//进入详情页
		goDetails( id ){
			uni.navigateTo({
				url:`/pages/details/usedCarDetails?id=${id}`
			})
		}
	}
}
</script>

<style>
.icon{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.filter{
	display: flex;
	justify-content: space-between;
}
.fui-filter__item {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
	background-color: #fff;
}

.fui-filter__icon {
	transition: all .15s linear;
}

.fui-icon__ani {
	transform: rotate(180deg);
}
</style>